<template>
	  <div class="common-layout">
	    <el-container>
	      <el-header style="width: 100%;height: 6rem;" >
		      <div>
		        <el-container>
		             <el-aside width="30%"></el-aside>
		             <el-main >
						 <img
						   style="width: 20%; margin-top: -1rem;"
						   src="../assets/tubiao.png"
						   alt="Element logo"
						 />
					 </el-main>
		             <el-aside width="40%">
						 <div style="display: inline-flex;margin-top: 2rem;">
						 <p><el-icon style="color: red;" size="200%"><GoldMedal /></el-icon>100%正品</p>&emsp;&emsp;
						 <p><el-icon style="color: red;" size="200%"><Timer /></el-icon>7天无理由</p>&emsp;&emsp;
						 <p><el-icon style="color: red;" size="200%"><Calendar /></el-icon>限时抢购</p>
						 </div>
					 </el-aside>
		           </el-container>
		      </div>
		    
		  </el-header>
	      <el-main style="width: 100%;height:45rem;" class="main-background">
			<div style="display: flex;">
				<div style="width: 70%;">
					<div class="hot" style="display: flex;">
						<el-upload class="avatar-uploader" :auto-upload="false" list-type="picture" :show-file-list="true"
							 :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile">
							<img v-if="imgUrl" :src="imgUrl" class="avatar" style="width: 100%;height: 100%;" />
								<el-icon v-else class="avatar-uploader-icon" >
									<h4 style="text-align: center;">点击上传头像</h4>
								</el-icon>
						</el-upload>
					</div>
				</div>
				<div>
					<div class="centered-div">
						<div style="display: flex;height: 8%; width: 100%;">
							<div style="width: 48%;text-align:center;margin-top: 1rem;">
								<el-text style="font-size: 1.25rem; color: #000000;">会员注册</el-text>
							</div>
							<div style="width: 48%;text-align:center;margin-top: 1rem; margin-left: auto;" >
								<el-text style="font-size: 1rem;">已注册可
								<el-link type="danger" @click="gologin()">直接登录</el-link>
								</el-text>
								
							</div>
						</div>
						<hr />
						<div style="width: 80%;height: 7%; display: flex; margin-left: 10%;">
						<el-input  v-model="data.user.account"  placeholder="账号" :prefix-icon="User" />
						</div>
						&nbsp;
						<div style="width: 80%;height: 7%; display: flex;  margin-left: 10%;">
						<el-input  v-model="data.user.phone"  placeholder="手机号" :prefix-icon="Cellphone"/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 7%; display: flex;  margin-left: 10%;">
						<el-input v-model="data.user.password" placeholder="密码" :prefix-icon="Lock" type="password" clearable=""/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 7%; display: flex;  margin-left: 10%;">
						<el-input v-model="data.pwd" placeholder="确认密码" :prefix-icon="Lock" type="password" clearable=""/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 7%; display: flex;  margin-left: 10%;">
						<el-input  v-model="data.user.uname"  placeholder="昵称" :prefix-icon="UserFilled"/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 7%; display: flex;  margin-left: 10%;">
							<el-select v-model="data.user.permid" placeholder="权限" style="width: 250px">
								<el-option v-for="item in data.perm" :label="item.pname" :value="item.permid" />
							</el-select>
						</div>
						&nbsp;
						<div style="width: 80%;height: 9%; display: flex; background-color: salmon; margin-left: 10%;">
						<el-input
						    v-model="data.user.address"
						    style="width: 100%"
						    :rows="3"
						    type="textarea"
						    placeholder="收货地址"
							:prefix-icon="UserFilled"
						  />
						</div>
						<div style="height: 7%;"></div>
						  <div style="text-align:center; margin: 0;width: 100%;height: 20%;">
						    <el-button size="large" type="primary" @click="cancel()" style="background-color: #E1337F; width: 50%;">
						      立刻注册
						    </el-button>
							</div>
						

					</div>
				</div>
			</div>
		  </el-main>
	      <el-footer style="width: 100%;height: 4.9rem;" >
			  <bottom></bottom>
			  </el-footer>
	    </el-container>
	  </div>
</template>


<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Cellphone,UserFilled,GoldMedal,Timer,Calendar} from '@element-plus/icons-vue'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {success,warning,message,errors} from '../store/alert.js'
		import bottom from "../components/bottom.vue"
		const imgUrl = ref(''); //定义单个响应式变量
		const fd = new FormData();
		const data=reactive({
				user:{
					uname:"",
					phone:"",
					password:"",
					account:"",
					address:"",
					permid:""
				},
				pwd:'',
				perm:[{permid:'',pname:''}]
					
				
		})
		function onChangeFile(file, fileList) {
			console.log("onChangeFile....")
			console.log(fileList) //打印出数组
			const maxSize = 500 * 1024; // 500kb
			if (file.size > maxSize) {
			  errors('文件大小不能超过 500kb');
			  return;
			}
			if (fileList.length > 0) {
				console.log(fileList[0]);
				// fileList[0].raw;  就是文件内容
				imgUrl.value = URL.createObjectURL(fileList[0].raw)
				// fd.append("img", fileList[0].raw)
				console.log(fileList[0].raw)
				fd.append("img", fileList[0].raw)
			}
		}
		function onRemoveFile(file, fileList) {
			imgUrl.value=""
			
			
			}
		
		function cancel(){
			console.log("注册")
			if(data.user.account==""){
				errors("账号不允许为空")
				return
			}
			if(data.user.phone.length!=11||data.user.password==""){
				errors("手机号不正确")
				return
			}
			if(data.user.uname==""){
				errors("昵称不允许为空")
				return
			}
			if(data.user.address==""){
				errors("收货地址不允许为空")
				return
			}
			if(data.user.password==""||data.pwd!=data.user.password||data.pwd==""){
				errors("密码不正确")
				return
			}
			if(data.user.permid==""){
				errors("请选择权限")
				return
			}
			fd.append("uname",data.user.uname)
			fd.append("phone",data.user.phone)
			fd.append("account",data.user.account)
			fd.append("password",data.user.password)
			fd.append("address",data.user.address)
			fd.append("permid",data.user.permid)
			$postf("/public/enroll",fd).then((read)=>{
				if(read.data.code==401){
					errors(read.data.msg)
					return
				}
				success(read.data.msg)
				router.push("/login")
			})
			
		}
		function gologin(){
			
			router.push("/login")
			
		}
		onMounted(()=>{
			store.state.gologin=false
			$get("/public/findAllPerm").then((read) => {
				data.perm = read.data.data
			})
			
		})
</script>

<style>
	.main-background {
	  background-color: #f0f0f0;
	  background-image: url('../assets/dengl.png'); /* 若要使用背景图片 */
	  background-size: cover; /* 调整背景图片大小 */
	  background-repeat: no-repeat; /* 防止背景图片重复 */
	}
	.centered-div {
	            position: absolute;
	            top: 30%;
	            left: 60%;
	            width: 20%;
	            height: 60%;
	            margin-top: -25px;
	            margin-left: -50px;
	            background-color:rgba(255, 255, 255, 0.8);
	        }
	.hot{
		position: absolute;
		top: 40%;
		left: 30%;
		width: 10%;
		height: 11%;
		margin-top: -25px;
		margin-left: -50px;
		/* background-color:rgba(255, 255, 255, 0.8); */
		
	}
	.avatar-uploader .avatar-uploader-icon {
	  font-size: 28px;
	  color: #000000;
	  width: 100%;
	  height: 100%;
	  line-height: 0.625rem; /* 根据高度调整行高，使文字垂直居中 */
	  text-align: center;
	}
</style>
